<template>
    <div class="my-dialog">
        <el-dialog v-model="dialogVisible" :title="dialogForm.title" :width="dialogForm.width">
            <el-form :model="form" ref="ruleFormRef" :rules="rules">
                <el-form-item label="不予立案原因" :label-width="formLabelWidth" prop="remark">
                    <el-input v-model="form.remark" autocomplete="off" type="textarea" :rows="4"
                        placeholder="请输入不予立案原因" />
                </el-form-item>
            </el-form>
            <div class="btn-box">
                <el-button @click="resetForm(ruleFormRef)" :loading="loading">取消</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { store } from '@/store'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { ref, reactive, watch, computed } from 'vue'
import { notTreadApi } from '../api/dangerApi'
import {
    getUserInfo,
} from '@/global/session'

let userInfo = reactive({ roleId: '', townId: '', roleAuth: '' })
userInfo = JSON.parse(getUserInfo() as string)

const dialogVisible = ref<boolean>(false) //弹窗是否出现
const ruleFormRef = ref<FormInstance>()
const formLabelWidth = '140px'
const dialogForm = {
    width: '30%',
    title: '不予立案',
}
//监听加载
const loading = computed(() => {
    return store.getters['loading/getLoad']
})
const emit = defineEmits(['onCancel'])

interface PropsDialog {
    isShowDialog: boolean //弹窗是否出现
    dialogData?: any
    isBack?: boolean // 详情页调用

}
const props = withDefaults(defineProps<PropsDialog>(), {
    isShowDialog: false,
    isBack: false

})

//监控弹窗是否出现
watch(
    () => props.isShowDialog,
    () => {
        form.remark = ''
        ruleFormRef.value?.resetFields()
        dialogVisible.value = !dialogVisible.value
    }
)

const form = reactive({
    remark: '',
})

const rules = reactive<FormRules>({
    remark: [
        {
            required: true,
            message: '请输入不予立案原因',
            trigger: 'change',
        },
    ],
})

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    dialogVisible.value = !dialogVisible.value
}

const submitForm = async (formEl: FormInstance | undefined) => {

    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            let params = {
                id: props.dialogData,
                remark: form.remark,
            }
            notTreadApi(params).then((res) => {
                if (res.code == 0) {
                    if (userInfo.roleId == '4' || userInfo.roleId == '6') {
                        ElMessage.success('已提交申请!')
                    } else {
                        ElMessage.success('已不予立案!')
                    }
                    form.remark = ''
                    dialogVisible.value = !dialogVisible.value
                    setTimeout(() => {
                        console.log('shuaxin')
                        //刷新表格
                        store.commit('refresh/setRefresh', !store.getters['refresh/getRefresh'])
                        if (props.isBack) {
                            emit('onCancel')
                        }
                    }, 1000);
                } else {
                    store.commit('loading/setLoad', false)
                }
            })
        } else {
            store.commit('loading/setLoad', false)
        }
    })
}
</script>
<style scoped lang="scss">
.btn-box {
    text-align: right;
}
</style>
